<template>
  <div>
    <el-dialog
      :title="diaInfo.isAdd ? '添加活动' : '编辑活动'"
      :visible.sync="diaInfo.isShow"
      center
      :before-close="cancel"
    >
      <el-form :model="seckForm" ref="seckRef">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="seckForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动期限" :label-width="formLabelWidth">
          <!-- picker-options	当前时间日期选择器特有的选项参考下表 -->
          <!-- align	对齐方式 -->
          <el-date-picker
            v-model="timeArr"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="一级分类" :label-width="formLabelWidth">
          <el-select
            v-model="seckForm.first_cateid"
            @change="changeFirst"
            placeholder="请选择"
          >
            <el-option
              v-for="item in getCate"
              :label="item.catename"
              :key="item.id"
              :value="item.id"
            ></el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" :label-width="formLabelWidth">
          <el-select
            v-model="seckForm.second_cateid"
            @change="changeSecond"
            placeholder="请选择活动区域"
          >
            <el-option
              v-for="item in secondArr"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            ></el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="商品" :label-width="formLabelWidth">
          <el-select v-model="seckForm.goodsid" placeholder="请选择活动区域">
            <el-option
              v-for="item in commodityArr"
              :key="item.id"
              :label="item.goodsname"
              :value="item.id"
            ></el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-tooltip :content="'Switch value: ' + value" placement="top">
            <el-switch
              v-model="seckForm.status"
              active-color="#13ce66"
              inactive-color="#ccc"
              :active-value="1"
              :inactive-value="2"
            >
            </el-switch>
          </el-tooltip>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import { seckAdd, seckInfo, seckEdit } from "../../request/api.js";
export default {
  props: ["diaInfo"],
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      seckForm: {
        id: "", // 编号，必填项
        title: "", //限时秒杀名称
        begintime: "", //开始时间
        endtime: "", //结束时间
        first_cateid: "", //商品一级分类编号
        second_cateid: "", //商品二级分类编号
        goodsid: "", //商品编号
        status: 1, //状态  1正常2禁用number
      },
      formLabelWidth: "120px",
      value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      value: "1",
      commodityArr: [], // 商品数组
      secondArr: [], // 二级分类数组
      timeArr: [], // 活动期限
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    // 辅助函数
    ...mapActions({
      // 商品分类
      getCateListActions: "cate/getCateListActions",
      // 商品管理
      getGoodsListActions: "goods/getGoodsListActions",
      // 秒杀
      getSeckListActions: "seck/getSeckListActions",
    }),
    changeFirst(n) {
      // console.log(n);
      // this.seckForm.second_cateid = "";
      // this.seckForm.goodsid = "";
      // this.commodityArr = [];
      // this.secondArr = this.getCate.find((item) => item.id == n).children;
      let index = this.getCate.findIndex((item) => {
        return item.id == this.seckForm.first_cateid;
      });
      // console.log(this.getCate[index]);
      this.secondArr = this.getCate[index].children;
      //  console.log( this.secondArr);
    },
    changeSecond(n) {
      // console.log(n);
      // this.seckForm.goodsid = "";
      // this.commodityArr = this.getGoodsList.filter(
      //   (v) => {
      //     console.log(v);
      //     return v.second_cateid == n
      //     }
      // )
      // console.log(this.commodityArr);
      // console.log(this.seckForm.second_cateid, "表单");
      // console.log(this.getGoodsList, "数据");
      this.commodityArr = this.getGoodsList.filter((item) => {
        return item.second_cateid == this.seckForm.second_cateid;
      });
      // console.log(this.commodityArr);
    },
    // 封装一个取消
    cancel() {
      this.$emit("cancel", false);
      this.reset();
      this.timeArr = [];
    },
    reset() {
      this.seckForm = {
        id: "", // 编号，必填项
        title: "", //限时秒杀名称
        begintime: "", //开始时间
        endtime: "", //结束时间
        first_cateid: "", //商品一级分类编号
        second_cateid: "", //商品二级分类编号
        goodsid: "", //商品编号
        status: 1, //状态  1正常2禁用number
      };
      this.$refs.seckRef.resetFields();
    },
    lookup(id) {
      seckInfo({ id }).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.seckForm = res.list;
          this.seckForm.id = id
          // 处理时间格式 后太返回的是字符串的时间戳 要将数据转换成Number并转为中国标准时间
          this.seckForm.begintime = new Date(Number(this.seckForm.begintime));
          this.seckForm.endtime = new Date(Number(this.seckForm.endtime));
          // 数据回显
          this.timeArr = [this.seckForm.begintime, this.seckForm.endtime];
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 添加
    confirm() {
      this.$refs.seckRef.validate((val) => {
        if (val) {
          this.seckForm.begintime = +new Date(this.timeArr[0]);
          this.seckForm.endtime = +new Date(this.timeArr[1]);
          if (this.diaInfo.isAdd) {
            // console.log(this.seckForm);
            seckAdd(this.seckForm).then((res) => {
              if (res.code == 200) {
                // 添加成功
                this.$message.success(res.msg);
                // 关闭弹窗
                this.cancel();
                // 重新渲染视图
                this.getSeckListActions();
              } else {
                // 添加失败
                this.$message.error(res.msg);
              }
            });
          } else {
            seckEdit(this.seckForm).then((res) => {
              // console.log(res);
              // return;
              if (res.code == 200) {
                // 添加成功
                this.$message.success(res.msg);
                // 关闭弹窗
                this.cancel();
                // 重新渲染视图
                this.getSeckListActions();
              } else {
                // 添加失败
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
  },
  mounted() {
    this.getCateListActions();
    this.getGoodsListActions();
    this.getSeckListActions();
    console.log(this.getSeckList);
    // console.log(this.getCate);
    // console.log(this.getGoodsList);
    // this.$store.dispatch('goods/getGoodsListActions')
  },
  watch: {},
  computed: {
    ...mapGetters({
      getCate: "cate/getCate",
      getGoodsList: "goods/getGoodsList",
      getSeckList: "seck/getSeckList",
    }),
  },
  filters: {},
  components: {},
};
</script>
<style scoped></style>
